<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <title>title</title>
        <link rel="stylesheet" type="text/css" href="../css/api.css"/>
        <style media="screen">
        body {
            padding-top: 1.5rem;
        }

        .header {
            width: 93%;
            height: 2.5rem;
            padding: 0.5rem 0.8rem 0.2rem 0.8rem;
            color: #ffff;
            line-height: 2.5rem;
            position: fixed;
            top:1.5rem;
            background-color: #40cccc;
        }

        .header ul {
            width: 60%;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }

        .header ul li {
            width: 449%;
            text-align: center;
            float: left;
        }

        .header ul li a {
            color: #fff;
            text-decoration: none;
            font-weight: bold;
        }
      #nice{
        border-bottom: 0.2rem solid orange;
      }
      .img{
        margin-top: 3rem;
        width: 100%;
        height: 20%;
      }
      .img img{
        width: 100%;
        height: 100%；
      }
      .nav{
        width: 93%;
        padding: 0.5rem 0.8rem;
        height: 5.3rem;
        line-height: 1.7rem;
        border-bottom: 0.1rem solid #ccc;
      }
      .nav p{
        color: #ccc;
        font-size: 0.9rem;
      }
      .content{
        width: 93%;
        padding: 0.5rem 0.8rem;
      }
      .footer{
        width: 93%;
        height: 2rem;
        color: #fff;
        background-color: #40cccc;
        text-align: center;
        line-height: 2rem;
        padding: 0.5rem 0.8rem;
        margin-top: 3rem;
      }
      .content p{
        line-height: 1.9rem;
        font-size: 0.95rem;
        color: #5b5b5b;
      }
        </style>
    </head>
    <body>
      <div class="header">
          <ul>
              <li><a href="#">我的圈子</a></li>
              <li><a href="#" id="nice">人气推荐</a></li>
          </ul>
      </div>
      <div class="img">
        <img src="../image/u11.png" alt="">
      </div>
      <div class="nav">
        <h4>童趣儿童故事大赛</h4>
        <p>活动时间：2019年9月10日 10：00-10月31日</p>
        <p>已有1456人参加</p>
      </div>
      <div class="content">
        <p>·少儿英语主题区活动地点运维福田区图书馆少儿阅览区二楼；</p>
          <p>·手工类的活动，家长需提前1小时到活动现场报名（报名需提供身份证等相关证件来证明时候符合年龄要求）</p>
        <p>·其余的活动请提前10分钟到场参加即可；</p>
        <p>若有疑问，请咨询少儿馆工作人员。联系电话：83055073，83055120；</p>
        <p>·其余的活动请提前10分钟到场参加即可；</p>
        <p>若有疑问，请咨询少儿馆工作人员。联系电话：83055073，83055120；</p>
      </div>
      <div class="footer">
        我要参加
      </div>
    </body>
    <script type="text/javascript" src="../script/api.js"></script>
      <script type="text/javascript" src="../script/common.js"></script>
    <script type="text/javascript">
        apiready = function(){

        };
    </script>
    </html>
